<template>
  <view
    class="flex"
    :class="[props.direction == 'row' ? 'flex-row ' : 'flex-col', props.direction == 'customCol' ? '' : _align]"
    :style="{ flexWrap: props.direction == 'customCol' ? 'nowrap' : 'wrap' }"
  >
    <slot></slot>
  </view>
</template>
<script lang="ts" setup>
import { computed, nextTick, provide, ref, watch, getCurrentInstance, inject, toRaw, PropType, reactive, Ref } from 'vue';
import { inputPushItem, rulesItem } from './../zh-form-item/interface';
const emits = defineEmits(['update:modelValue', 'change']);
const proxy = getCurrentInstance()?.proxy ?? null;
const props = defineProps({
  disabled: {
    type: Boolean,
    default: false,
  },
  //最大选中数量。
  max: {
    type: Number,
    default: 999,
  },
  defaultValue: {
    type: Array,
    default: () => [],
  },
  align: {
    type: String as PropType<'left' | 'center' | 'right'>,
    default: 'left',
  },
  modelValue: {
    type: Array,
    default: () => [],
  },
  direction: {
    type: String as PropType<'row' | 'col' | 'customCol'>,
    default: 'row', //row横排，col为竖排。customCol
  },
});
let _cacheBoxList: Ref<Array<string | number | boolean>> = ref([]);
//去重
const _mValue = ref(props.modelValue || []);
const _align = computed(() => {
  let list = {
    left: 'flex-row-center-start',
    center: 'flex-row-center-center',
    right: 'flex-row-center-end',
  };
  let listCol = {
    left: 'flex-col-center-start',
    center: 'flex-col-center-center',
    right: 'flex-col-center-end',
  };
  return props.direction == 'row' ? list[props.align] : listCol[props.align];
});
//组件唯一标识。
const checkBoxkeyId = 'zhCheckBoxGroup';
watch(
  () => props.modelValue,
  () => {
    _mValue.value = props.modelValue || [];
  },
  { deep: true }
);

const _maxChecked = computed(() => _mValue.value.length >= props.max ?? 0);
function pushKey(key: string | number | boolean) {
  _cacheBoxList.value.push(key);
}
function addKey(key: string | number | boolean) {
  if (_mValue.value.includes(key)) return;
  _mValue.value.push(key);
  emits('update:modelValue', _mValue.value);
  nextTick(() => {
    emits('change', _mValue.value);
  });
}
function delKey(key: string | number | boolean) {
  _cacheBoxList.value = _cacheBoxList.value.filter((el) => el !== key);
  _mValue.value = _mValue.value.filter((el) => el !== key);
  emits('update:modelValue', _mValue.value);
  nextTick(() => {
    emits('change', _mValue.value);
  });
}

provide(
  'zhCheckedBoxDisabled',
  computed(() => props.disabled)
);
provide('zhCheckedBoxVal', _mValue);
provide('zhCheckedBoxMax', _maxChecked);
provide('zhCheckedBoxListChildren', _cacheBoxList);
provide('zhCheckedBoxDir', props.direction);
defineExpose({
  pushKey: pushKey,
  addKey: addKey,
  delKey: delKey,
  checkBoxkeyId: checkBoxkeyId,
});
</script>
